<template>
    <div class="Code_login" v-loading="loading">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="Email">
                <el-input placeholder="请输入邮箱号" v-model="ruleForm.Email" autocomplete="off">
                    <i slot="prefix" class="el-input__icon el-icon-message"></i>
                </el-input>
            </el-form-item>
            <el-form-item prop="Email_Code">
                <div class="code_input">
                    <el-input placeholder="请输入验证码" v-model="ruleForm.Email_Code" autocomplete="off">
                        <i slot="prefix" class="el-input__icon el-icon-edit"></i>
                    </el-input>
                    <el-button plain style="margin-left: 10px;" :disabled="CodeClickState || !regEmail.test(ruleForm.Email)" @click="SendCode">{{codeMsg}}</el-button>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 100%;" @click="submitForm('ruleForm')" :disabled="!ruleForm.Email || !ruleForm.Email_code">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "Code_login",
    data() {
        var checkEmail = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('邮箱不能为空'));
            }
            let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            if(!reg.test(value)){
                return callback(new Error('邮箱格式有误！'));
            }else{
                callback()
            }
        };
        var checkCode = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('验证码不能为空'));
            }else{
                callback()
            }
        };
        return {
            ruleForm: {
                Email:"",
                Email_Code:""
            },
            rules: {
                Email: [
                    { validator: checkEmail, trigger:  ['blur', 'change'] }
                ],
                Email_Code: [
                    { validator: checkCode, trigger:  ['blur', 'change'] }
                ]
            },
            regEmail:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            codeMsg:this.$store.state.login.CodeTimer +"秒" || "获取验证码",
            timer:null,
            CountTime:60,
            CodeClickState:false,
            loading:false
        }
    },
    created(){
        this.init()
    },
    methods: {
        init(){
            if(this.$store.state.login.CodeTimer >1){
                this.CountTime = this.$store.state.login.CodeTimer
                this.ruleForm.Email = this.$store.state.login.email
                this.CodeClickState = true
                this.timer = setInterval(()=>{
                    if(this.CountTime >1 ){
                        this.CountTime --
                        this.codeMsg = `${this.CountTime}秒`
                        this.CodeClickState = true
                        this.$store.commit("SET_CodeTimer",this.CountTime)
                    }else{
                        this.codeMsg = "获取验证码"
                        clearInterval(this.timer)
                        this.timer = null
                        this.CountTime = 60
                        this.CodeClickState = false
                    }
                },1000)
            }else{
                this.codeMsg = "获取验证码"
                clearInterval(this.timer)
                this.timer = null
                this.CountTime = 60
            }
        },
        SendCode(){
            this.loading = true
            this.$store.commit("SET_LOGINEmail",this.ruleForm.Email)
            setTimeout(()=>{
                this.loading = false
            },1000)
            this.timer = setInterval(()=>{
                if(this.CountTime >1 ){
                    this.CountTime --
                    this.codeMsg = `${this.CountTime}秒`
                    this.CodeClickState = true
                    this.$store.commit("SET_CodeTimer",this.CountTime)
                }else{
                    this.codeMsg = "获取验证码"
                    clearInterval(this.timer)
                    this.timer = null
                    this.CountTime = 60
                }
            },1000)
        },
        submitForm(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    beforeDestroy(){
        clearInterval(this.timer)
        this.timer = null
    }
}
</script>
<style lang="less" scoped>
.Code_login {
    width: 90%;
    height: 100%;
    margin: 0 auto;

    .demo-ruleForm {
        padding-top: 30px;
    }
    .code_input{
        display: flex;
    }
}

/deep/ .el-form-item__content {
    margin-left: 0 !important;
}
</style>